<!-- 赞和收藏 -->
<template>
	<view>
		<u-gap height="2" bg-color="#E9E9E9"></u-gap>
		<view style="padding-top:300rpx;" v-show="pageData.length==0">
			<u-empty></u-empty>
		</view>
		<view v-for="item in pageData" :key="item.id">
			<view class="item">
				<view class="item1">
					<image :src="item.avatar" mode="" class="img"></image>
				</view>
				<view class="item2">
					<view class="row1">{{item.nickname}}</view>
					<view class="row2">
						<view class="col1" v-if="item.collect_stataus">收藏了你的笔记</view>
						<view class="col1" v-else-if="item.likes_stataus">赞了你的笔记</view>
						<view class="col1" v-else>赞了你的评论</view>
						<view class="col2">{{item.trends.create_time}}</view>
					</view>
					<view class="row4">
						<view class="col1"></view>
						<view class="col2">{{item.trends.contents}}</view>
					</view>
				</view>
				<view class="item3">
					<image :src="item.trends.picture[0]" mode="" class="img"></image>
				</view>
			</view>
			<view class="line"></view>
		</view>
		<!-- 弹窗 -->

	</view>
</template>

<script>
	import api from '@/commonJS/api.js';
	import common from '@/commonJS/common.js';
	export default {
		data() {
			return {
				myInfo: '', //我的信息
				pageData: [], //页面数据
			}
		},
		onLoad() {
			if(uni.getStorageSync('userInfo')){
				this.myInfo = JSON.parse(uni.getStorageSync('userInfo'));
				console.log('我的信息', this.myInfo);
				this.getPageData();
			}else{
				uni.navigateTo({
					url:'/pagesLogin/login'
				});
			}
		},
		methods: {
			// 获取当前页面数据
			getPageData() {
				const obj = {
					status: 1,
					uid: this.myInfo.uid,
				}
				const _this = this;
				common.ajaxFn(api.im_zanheshoucang, 'POST', obj).then((res) => {
					console.log('页面数据', res.data.data.list);
					if (res) {
						_this.pageData = res.data.data.list;
					}
				});
			},
			
		}
	}
</script>

<style lang="scss" scoped>
	.item {
		padding: 48rpx 20rpx 40rpx 20rpx;
		display: grid;
		grid-template-columns: auto 1fr auto;
		grid-column-gap: 20rpx;

		.item1 {
			.img {
				display: block;
				width: 80rpx;
				height: 80rpx;
				border-radius: 50%;
			}
		}

		.item2 {
			.row1 {
				color: $gray-three;
				font-size: $font-erba;
				font-weight: bold;
			}

			.row2 {
				margin-top: 6rpx;
				display: flex;
				align-items: center;
				color: $gray-six;
				font-size: $font-ersi;

				.col1 {}

				.col2 {
					margin-left: 14rpx;
				}
			}

			.row4 {
				margin-top: 10rpx;
				display: flex;
				align-items: center;

				.col1 {
					margin-right: 8rpx;
					width: 8rpx;
					height: 36rpx;
					background-color: #D9D9D9;
					border-radius: 100rpx;
				}

				.col2 {
					color: $gray-six;
					font-size: $font-erba;
				}
			}
		}

		.item3 {
			.img {
				display: block;
				width: 80rpx;
				height: 80rpx;
				border-radius: 8rpx;
			}
		}
	}

	.line {
		width: 710rpx;
		height: 1px;
		background-color: #E9E9E9;
		margin: 0 auto;
	}
</style>